@video-player-wrapper-height:                 550px;
@video-player-anlyze-width:              (@gridColumnWidth * 4) + (@gridGutterWidth * (4 - 1));
// @navtab-height:                       40px;
@navtab-height:                       40px;
@player-wrapper-height:                        480px;

.video-title{
    border-left: 3px solid #00a8fc;
    padding-left:20px;
    margin-top:10px;
}
.video-player{
    .error-404page .error-message {
    // padding-top:300px;
        // #grid1200 > .column(8);
        height:@player-wrapper-height;
        display: block;
        background: #212223;
        color:#fcfcfc;
        p{
            text-align: center;
        }
    }
}
#jwplayerContainer{
    position: absolute;
    bottom:0;
    left:-300px;
}


.video-player-wrapper{
    margin-left: -20px;

}
.player-wrapper{
    height:@player-wrapper-height;
    position: relative;
    background: rgb(33,34,35);
}
.player-ab-wrapper{
    width: 100%;
    height: 100%;
    video{
        height: 100%;
        width: 100%;
        background-color: #222;
    }
    // position: absolute;
}
.jwplayer{
    height: 100%!important;
    width: 100%!important;
}
.video-player{
    // 480+20+300
    height:auto;
    #grid940 > .column(12);
    float:left;
    margin-bottom: 20px;
}
// .player-wrapper{
//     #grid940 > .column(12);
// }
.video-anlyze{
    position: relative;
     #grid940 > .column(4);
     float:right;
    .nav-tabs-wrapper{
        position: absolute;
        position: relative\0;
        position: absolute\9;
        width:@video-player-wrapper-height;
        left: @navtab-height+8;
        margin-left: 80px;
        top: (@video-player-wrapper-height )/2;
        margin-bottom: 0;
    }
    .sider-right{
        height:@player-wrapper-height - @navtab-height ;
        #grid940 > .column(4);
        display: block;
        margin:0;
        overflow: hidden;
        background: #212223;
        .accordion-group{
            border:none;
        }
        .tab-pane{
            padding:10px;
        }

        a{
            color:#BABABA;
            &:hover,
            &:focus{
                color:#BABABA;
            }
        }
        p{
                color:#535354;
        }
                color:#535354;
    }

}
// @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
//    .video-anlyze .nav-tabs-wrapper{  
//     position: absolute;
//     left: @navtab-height+8;
//     } 
// }
.video-coments{
     #grid940 > .column(8);
     float:left;

     .tabs li a{
        width:100px;
        text-align: center;
     }
}
// .video-recomands{
//      #grid940 > .column(8);
//      float:left;
//      margin-left: 0;
// }
// @media (max-width: 768px){
//     .video-player,
//     .player-wrapper,
//     .video-coments,
//     .video-recomands,
//     .video-anlyze{
//         width:auto;
//         float:none;
//         display: block;
//         .live-wrapper .sider-right{
//                 width:100%;
//         }
//         .nav-tabs-wrapper{
//             position: relative;
//             margin:0;
//             width:100%;
//         }
//     }
//     .video-player{
//         height:@video-player-wrapper-height;
//     }
//     // .player-wrapper{
//     //     margin-left:0;
//     // }

// }

// @media (min-width: 768px) and (max-width: 979px) {
//     // .player-wrapper,
//     .video-player{
//        #grid768 > .column(12);
//        .video-tools-bar{
//         width: 100%;
//        }
//     }
//     .video-anlyze{
//         width:100%;
//         .nav-tabs-wrapper{
//             position: relative;
//             .rotate(0deg);
//             left:0;
//             top:0;
//         }
//         .sider-right{
//             width:100%;
//             height:auto;

//         }
//     }
//     .video-coments{
//         #grid768 >  .column(9);
//     }
//     .video-recomands{
//         #grid768 >  .column(3);
//         margin-left: 20px;
//     }
// }
// @media (max-width: 1200px)  {
//     .video-anlyze{

//         .nav-tabs-wrapper{
//             // position: relative;
//             // .rotate(0deg);
//             // left:0;
//             // top:0;
//             left:-38px;
//         }
//     }
// }
// @media (min-width: 1200px)  {
    // .player-wrapper,
    .video-player{
       #grid1200 > .column(8);
    }
    .online-panel .video-player{
        float: none;
    }
    .video-anlyze{
        #grid1200 >  .column(4);
        .sider-right{
            width: 100%;
        }
    }
    .video-coments{
        #grid1200 >  .column(8);
    }
    // .video-recomands{
    //     #grid1200 >  .column(4);
    // }
// }
#videoplayInfo,
#videoplaytimeinfo,
#videoplaysw,
#videoplaylesson,
#commentsVideoApplication{

    height:@video-player-wrapper-height - @navtab-height - 70;
    overflow:auto;
    overflow-x:hidden;
    box-sizing: border-box;
    position: relative;
}
.online-route{
    li{
        display: inline-block;
        .ie7-inline-block();
        padding: 5px 10px;
        background-color: #43505E; 
        border-radius: 5px;
        margin: 0 10px;
        cursor: pointer;
    }
    li.active{
        background-color: #0C78AA;
        color: #eee;
    }
}

.errCover{
    width: 100%;
    z-index: 9999999;
    height:100%;
    color:#fff;
    background: #000000;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    div.centerbox{
        position: absolute;
        top:40%;
        width: 100%;
        text-align: center;
        padding-top:56px;
        background:  url('../../images/error.png') top center no-repeat;
        h3{
            font-weight: normal;
            font-size:18px;
            color:#999999;
            height: 18px;
            margin:0;
            line-height: 18px;
        }
        h4{
            font-size: 14px;
            font-weight: normal;
            color: #777777;
            height: 14px;
            line-height: 14px;
            margin-top:16px;
        }
    }
}
div.tab-content{
    div.alert{
        background-color: transparent;
        border: none;
        text-shadow:none;
        color:#bababa;
    }
}
#collections{
    li{
        margin:4px 33px 4px 0;
    }
    li:nth-child(4n){
        margin-right:0px;
    }
}
